<template>

  <div class="dataManage video_wrapper">
    <!--查看视频弹出框-->
    <div v-if="isVideo" class="video_box2" @click="closeWindow()">
      <div class="video_window_container">
        <video ref="videos" x5-video-player-type="h5" playsinline webkit-playsinline="true" preload="auto" autoplay
               poster="@/assets/images/poster.jpg" controls :src="videourl"></video>
      </div>
    </div>
    <!--查看视频弹出框-->

    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">{{stage_name}}</div>
      <div v-show="isEdit" slot="right">
        <div v-if="!showDelete" class="right" @click="showDelete = true">编辑</div>
        <div v-else class="right" @click="onSave">保存</div>
      </div>
    </nav-bar>

    <div v-if="!isNoData">
      <div class="calendar">
        <div class="month_box">
          <div
            :class="{'have':item.is_h==1,'month_item':true,'hover':month == item.month}"
            v-for="(item,index) in months"
            @click="onChangeMonth(item,index)"
          >{{item.month}}
          </div>

        </div>
        <div class="day_box">
        <span
          :class="{'have':item.is_h==1,'hover':day == month+'-'+item.day}"
          v-for="(item,index) in days"
          @click="onChangeDay(item,index)"
        >{{item.day}}</span>
        </div>
      </div>
      <div v-if="isEdit" class="video_box">
        <div class="video_item" v-for="item in videoList" @click="toDetail(item)">
          <span class="video_time">{{item.ranges}}</span>
          <span class="look">查看视频</span>
          <span v-show="showDelete" @click.stop="onDelete(item)"><van-icon name="clear" color="#ff3b30"
                                                                           size="26"/></span>
        </div>
      </div>
      <div v-else class="video_box">
        <p class="textfz">这一天暂无数据，请选择其他日期</p>
      </div>
      <!--    <div class="add_btn"><label for="pop_video" id="labelr">-->
      <!--      <input style="display:none;" id="pop_video" type="file" accept="video/*"-->
      <!--             v-on:change="getVideo(event,'2')" name="fileTrans" ref="file" value="">-->
      <!--      <div class="inputVideo">选择上传视频</div>-->
      <!--    </label></div>-->
      <!--    <div class="upload_box">-->
      <!--      <van-popup v-model="show"-->
      <!--                 position="bottom"-->
      <!--                 :style="{ height: '100%' }"-->
      <!--                 :lazy-render="lazy_render"-->
      <!--                 closeable-->
      <!--                 close-icon-position="top-left"-->
      <!--      >-->
      <!--        <div>-->
      <!--          <h2 class="upload_box_title">上传视频</h2>-->
      <!--          <div class="video_preview">-->
      <!--            <video ref="videoId" id="videoId" controls width="100%" height="300"></video>-->
      <!--          </div>-->
      <!--          <div>-->
      <!--            <van-field-->
      <!--              readonly-->
      <!--              clickable-->
      <!--              name="datetimePicker"-->
      <!--              :value="valueTime"-->
      <!--              label="选择时间"-->
      <!--              placeholder="点击选择时间"-->
      <!--              @click="showTimePicker = true"-->
      <!--            />-->
      <!--            <van-popup v-model="showTimePicker" position="bottom">-->
      <!--              <van-datetime-picker-->
      <!--                v-model="currentDate"-->
      <!--                type="datetime"-->
      <!--                title="选择完整时间"-->
      <!--                :min-date="minDate"-->
      <!--                :max-date="maxDate"-->
      <!--                @confirm="onTimeConfirm"-->
      <!--                @cancel="showTimePicker = false"-->
      <!--              />-->
      <!--            </van-popup>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="add_btn">-->
      <!--          <van-button type="primary" color="#1692f2" @click="onUpVideo" block>确认上传</van-button>-->
      <!--        </div>-->

      <!--      </van-popup>-->
      <!--    </div>-->
    </div>

    <div v-else>
      <no-data></no-data>
    </div>

    <!--    <van-popup :lazy-render="lazy_render" v-model="showVideo" @close="onCloseVideo">-->
    <!--      <div class="video_main">-->
    <!--        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls-->
    <!--               preload="auto"-->
    <!--        >-->
    <!--          <source-->
    <!--            type="video/mp4"-->
    <!--          >-->
    <!--        </video>-->
    <!--      </div>-->
    <!--    </van-popup>-->
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar"
  import noData from "@/components/content/nodata";

  export default {
    name: "videoList",
    components: {
      NavBar,
      noData
    },

    data() {
      return {
        isVideo: false,//是否弹出视频播放
        videourl: '',//视频播放地址
        isNoData: false,
        month: '',
        months: [],
        month_cur: 0,
        days: [],
        day: '',
        day_cur: 0,
        lazy_render: false,
        show: false, //展示上传图片层
        base_id: '',
        pid: '',
        bid: '',
        sid: '',
        stage_name: '',
        videoFiles: '',
        list: [],
        videoList: [],
        showVideo: false,
        isEdit: false,
        showDelete: false,
        valueTime: '',
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        showTimePicker: false,
        file: '',
      }

    },

    created() {
      this.base_id = this.$route.query.base_id;
      this.bid = this.$route.query.bid;
      this.pid = this.$route.query.pid;
      this.sid = this.$route.query.sid;
      this.stage_name = this.$route.query.stage_name;
      this.getMonths();
    },

    mounted() {
      if (this.$refs.videos) {
        this.$refs.videos.play();
      }
    },

    methods: {
      getMonths() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getMonth', {bid: that.bid, sid: that.sid}, r => {
          console.log('请求月份：', r)
          if (r.info != '暂无数据') {
            that.months = r.data;

            let months = r.data
            let h_months = []
            months.forEach(function(item,i){
              if(item.is_h == 1){
                h_months.push(item.month)
              }
            })
            console.log('h_months:',h_months)
            that.month = h_months[h_months.length-1]
            this.getDays();
          } else {
            that.isNoData = true
          }
        })
      },

      getDays() {
        console.log('哪一月：',this.month)
        let that = this;
        that.$http.get('/api/MobileAadminApi/getDay', {bid: that.bid, sid: that.sid, month: that.month}, r => {
          console.log('days:', r)
          that.days = r.data;

          let days = r.data
          let h_days = []
          days.forEach(function(item,i){
            if(item.is_h == 1){
              h_days.push(item.day)
            }
          })
          console.log('h_days:',h_days)
          that.day = that.month+'-'+h_days[h_days.length - 1]
          this.getVideoList();
        })
      },

      getVideoList() {
        let that = this;
        console.log('哪一天：', that.day)
        const params = {
          bid: that.bid,
          sid: that.sid,
          type: 1,
          day: that.day
        };
        that.$http.get('/api/MobileAadminApi/getVideoList', params, r => {
          console.log('视频r:', r)
          if (r.code == 1) {
            that.videoList = r.data;
            if (r.data.length != 0) {
              that.isEdit = true;
            } else {
              that.isEdit = false;
            }
          }
        })
      },

      onChangeMonth(e, index) {
        this.month = e.month;
        console.log('this.month', this.month);
        this.getDays();
      },

      onChangeDay(e, index) {
        console.log('daye', e)
        let day = e.day;
        this.day = this.month + '-' + day
        console.log('day', day)
        this.getVideoList();
      },

      goBack() {
        this.$router.go(-1);
      },

      toDetail(event) {
        let that = this;
        console.log('视频跳转详情event', event);
        that.isVideo = true;
        that.videourl = event.sources;
        // this.$router.push({path: '/videoDetail', query: {sources: event.sources}});
      },
      closeWindow() {
        this.isVideo = false;
        this.videourl = null;
      },//关闭播放视频的弹窗
      onDelete(e) {
        console.log('删除e', e);
        let that = this;
        that.$dialog.confirm({
          title: '提示',
          message: '确认删除此视频？',
        })
          .then(() => {
            that.$http.get('/api/MobileAadminApi/deleteVideo', {id: e.id}, r => {
              console.log('删除视频', r)
              if (r.code == 1) {
                that.$toast(r.info)
                that.$router.replace({
                  path: '/refresh',
                  query: {
                    base_id: that.base_id,
                    pid: that.pid,
                    bid: that.bid,
                    sid: that.sid,
                    t: Date.now()
                  }
                });
              }
            })
          })
          .catch(() => {
            // on cancel
          });

      },

      onSave() {
        this.showDelete = false;
      },

      showPopup() {
        this.show = true;
        console.log('show', this.show);
      },

      getVideo(ev, typer) {
        let that = this;
        that.showPopup();
        //获取上传文件标签
        let filesId = document.getElementById('pop_video');
        //获取音频标签
        let videoId = this.$refs.videoId;
        //把当前files[0]传给getFileURL方法， getFileURL方法对其做一处理
        console.log('视频资源', filesId.files[0])
        that.videoFiles = filesId.files[0];

        let url = this.getFileURL(filesId.files[0])
        console.log('视频地址', url)
        console.log(videoId)
        if (url) {
          //给video标签设置src
          videoId.src = url
        }
        console.log(url)
      },

      onUpVideo() {
        let that = this;
        console.log('点击上传')
        this.$toast.loading({
          message: '上传中...',
          duration: 0
        })

        let formData = new FormData();
        formData.append("video", that.videoFiles);
        formData.append('base_id', that.base_id);
        formData.append('bid', that.bid);
        formData.append('sid', that.sid);
        formData.append('create_time', that.valueTime);
        that.$http.post('/api/MobileAadminApi/addVideo/', formData, r => {
          console.log('上传视频r:', r)
          if (r.code == 1) {
            that.$toast(r.info);
            that.show = false;
            that.$router.replace({
              path: '/refresh',
              query: {
                base_id: that.base_id,
                pid: that.pid,
                bid: that.bid,
                sid: that.sid,
                t: Date.now()
              }
            });
          }
        })
      },

      getFileURL(file) {
        let getUrl = null
        if (window.createObjectURL != undefined) {
          //basic
          getUrl = window.createObjectURL(file)
        } else if (window.URL != undefined) {//window.URL 标准定义
          //mozilla(firefox)
          //获取一个http格式的url路径，这个时候就可以设置<img>中的显示
          getUrl = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {//window.webkitURL是webkit的内核
          //webkit or chrome
          getUrl = window.webkitURL.createObjectURL(file)
        }
        return getUrl

        //video 标签的 duration属性，获取当前视频的长度
        // let duration = videoId.duration
        // if (Math.floor(duration) > 60) {
        // that.layer.msg('视频不能大于60秒')
        // }
      },

      onTimeConfirm(time) {
        console.log(time)
        let year = time.getFullYear()
        let month = time.getMonth() + 1
        let day = time.getDate()
        let hour = time.getHours();
        let minute = time.getMinutes();
        //let second = time.getSeconds();
        this.valueTime = `${year}-${month}-${day} ${hour}:${minute}:00`;
        this.showTimePicker = false;
      },

      // showVideoPopup(event) {
      //   console.log('345',event)
      //   this.showVideo = true;
      //   this.playOptions.sources[0].src = event.sources;
      //   console.log('视频地址：',this.playOptions.sources[0].src)
      //   this.initVideo();
      // },


    }
  }
</script>

<style scoped>
  .calendar {
    background: #fff;
    border-bottom-left-radius: .3rem;
    border-bottom-right-radius: .3rem;
  }

  .month_box {
    display: -webkit-box;
    flex-flow: row nowrap;
    justify-content: space-around;
    overflow-x: auto;
    font-size: .32rem;
    padding: .2rem;
    color: #a0a0a0;
  }

  .month_item.have:after {
    position: absolute;
    right: .12rem;
    top: 0;
    font-size: .3rem;
    content: '\25CF';
    color: #009944;
  }

  .month_item {
    position: relative;
    padding: .2rem;
    margin: .1rem;
  }

  .month_item.hover {
    color: var(--color-tint);
    background: #e6e7ff;
    border-radius: .1rem;
  }

  .day_box {
    /*display: flex;*/
    /*flex-flow: row wrap;*/
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /*overflow-x: auto;*/
    font-size: .3rem;
    font-weight: bold;
    padding: .2rem 0;
    border-top: 1px solid #eeeeee;
  }

  .day_box span {
    position: relative;
    /*padding: 18px 15px;*/
    padding: .2rem .2rem;
    margin: .16rem;
    background-color: #f0f2f7;
    border-radius: .1rem;
  }

  .day_box span.have:after {
    position: absolute;
    right: 50%;
    bottom: 0;
    font-size: 8px;
    width: .3rem;
    content: '\25CF';
    color: #eb6100;
    margin-right: -.15rem;
    text-align: center;
  }

  .day_box span.hover {
    color: #ffffff;
    background: var(--color-tint);
  }

  .inputVideo {
    height: 1rem;
    line-height: 1rem;
    background: var(--color-tint);
    color: #fff;
    font-size: .36rem;
    border-radius: .1rem;
    text-align: center;
  }

  .upload_box_title {
    height: .88rem;
    line-height: .88rem;
    font-size: .32rem;
    text-align: center;
    background: var(--color-tint);
    color: #fff;
    font-weight: normal;
  }

  .upload_box >>> .van-popup__close-icon {
    top: .22rem;
    color: #fff;
  }

  .video_date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    height: .5rem;
    line-height: .5rem;
    font-size: .28rem;
    background: rgba(255, 255, 255, 0.8);
  }

  .video_box {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    padding: .3rem .1rem;
  }

  .video_item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: .3rem;
    margin: .2rem .16rem;
    background: #ffffff;
    border-radius: .16rem;
  }

  .video_item >>> .van-icon-clear {
    position: absolute;
    right: -.2rem;
    top: -.2rem;
    background: #fff;
    border-radius: 50%;
  }

  .video_time {
    font-size: .36rem;
    width: 1.4rem;
    text-align: center;
  }

  .look {
    padding: 3px 7px;
    margin-top: 10px;
    font-size: .3rem;
    color: #ffffff;
    background: var(--color-tint);
    border-radius: 5px;
  }

  .textfz {
    padding-top: .6rem;
    display: flex;
    flex: 1;
    font-size: .32rem;
    justify-content: center;
  }

  .video_main {
    width: 7.5rem;
  }


  /*视频弹出的样式*/
  .video_box2 {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, .6);
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .video_window_container {
    height: 4.66rem;
    width: 7rem;
    overflow: hidden;
    border-radius: .16rem;
    transform: translateY(-2.3rem);
  }

  .video_window_container video {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /*视频弹出的样式*/

</style>
